<template>
  <!-- <div class="flex flex-wrap items-center"> -->
  <div class="catalog">
    <el-dropdown
      split-button
      type="primary"
      size="large"
      trigger="click"
      placement="bottom-end"
    >
      图层目录
      <template #dropdown>
        <el-dropdown-menu>
          <div class="list">
            <el-checkbox
              v-model="item.checked"
              :label="item.name"
              size="large"
              v-for="item in catalogList"
              :key="item.index"
              @click="handleClick(item)"
            />
          </div>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
  <!-- </div> -->
</template>

<script setup>
import { toRefs } from 'vue'
import { useMapgisStore } from '@/stores/mapgis'

const { catalogList } = toRefs(useMapgisStore())
const { CheckCatalogClick } = useMapgisStore()

// const checked = ref([])
const handleClick = (item) => {
    item.checked =!item.checked
    const index = item.index
    CheckCatalogClick( index, item.checked )

}
</script>

<style scoped>
.catalog {
  position: absolute;
  right: 50px;
  top: 60px;
  z-index: 9999;
}
.list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 10px;
}
</style>
